<!DOCTYPE html>
<style>
body {
  font-size: 40px;
}
.text-clip {
  background: blue;
  -webkit-background-clip: text;
  color: rgba(255,0,0,0.5);
}
.relative {
  position: relative;
  left: 10px;
}
</style>
Passes if all texts below are purple.
<br>
<!-- The &nbsp;s are to avoid glyph overflows. -->
<span class="text-clip">&nbsp;Text1&nbsp;</span><span class="text-clip">&nbsp;Text2&nbsp;</span>
<br>
<span class="text-clip">&nbsp;Text3&nbsp;</span><span class="text-clip">&nbsp;Text4&nbsp;</span>
